<template>
  <div id="echarts5"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Echarts5",
  data() {
    return {
      echarts:'',
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('echarts5')
      this.echarts = echarts.init(chartDom)

    },
    setEChartsOptions(data){
      const series=[]
      const legend=data.types

      data.data.forEach((item,index)=>{
        series.push({
          name: legend[index],
          type: 'bar',
          stack: '总量',
          data: item
        });
      })

      // const newData = [data.work_day,data.residue_day,data.beyond_day]
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: legend,
          bottom: "0%"
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.labels
          }
        ],
        yAxis: {},
        series: series
      };
      this.echarts && this.echarts.setOption(option);
    },
  }
}
</script>

<style scoped lang="scss">
#echarts5{
  width: 100%;
  height: 100%;
}
</style>
